<html>

<head>
  <title>SWARM GCS SIM</title>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="SwarmGCS">
  <link rel="apple-touch-icon" type="image/png" href="./icon_ios.png" />

  <link rel="icon" type="image/png" href="./icon.png" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

  <!-- Insert this line above script imports  -->
  <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="./libs/mavlink_bundle.js"></script>
  <script src="./libs/jszip.min.js"></script>
  <script src="./libs/vue.min.js"></script>
  <script src="./libs/roslib.min.js"></script>

  <script>if (window.module) module = window.module;</script>

  <link rel="stylesheet" type="text/css" href="gcs_common.css">
  <style>
    #swarm-sidebar {
      border-radius: 30px;
      /* background-color: aqua; */
      background-color: rgba(124, 145, 150, 0.8);
      /* filter: blur(10px); */
      /* overflow-y: scroll; */
      height: 80%;
      position: fixed;
      left: 1em;
      top: 5em;
      padding: 5px 15px;
      z-index: 1001;

    }
  </style>



</head>

<script id="vertexShader" type="x-shader/x-vertex">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  attribute vec3 position;
  attribute vec3 offset;
  varying vec4 vColor;
  attribute vec4 ca;
  attribute vec4 edgeColor;

  attribute vec3 center;
  varying vec3 vCenter;
  varying vec4 vedgeColor;
  attribute vec2 uv;
  varying vec2 vUv;


  void main() {
    vCenter = center;
    vedgeColor = edgeColor;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + position, 1.0 );
    vColor = ca;
    vUv = uv;

  }
</script>

<script id="fshader" type="x-shader/x-fragment">
  precision highp float;
  varying vec4 vColor;
  varying vec3 vCenter;
  varying vec2 vUv;
  varying vec4 vedgeColor;

  bool is_border() {
    float vEdgeWidth = 0.05;
    return vUv.x > 1.0 - vEdgeWidth || vUv.x < vEdgeWidth|| vUv.y > 1.0 - vEdgeWidth || vUv.y < vEdgeWidth  ;
  }

  bool is_border_line() {
    float vEdgeWidth = 0.00;
    return vUv.x > 1.0 - vEdgeWidth || vUv.x < vEdgeWidth|| vUv.y > 1.0 - vEdgeWidth || vUv.y < vEdgeWidth  ;
  }

  void main() {

    if (is_border_line()) {
      gl_FragColor = vec4(0, 0, 0, 0.0);
    } else if (is_border()) {
      gl_FragColor = vColor - vec4(0.2, 0.2, 0.2, 0.0);
    } else{
      gl_FragColor = vColor;

    }
  }
</script>


<body draggable="false" ontouchstart=””>
  <div id="urdf">URDF</div>
  <div class="container-fluid" style="width: 100%" id="container">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#" v-on:click="toggle_fullscreen()">SWARM GCS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse my-2 my-lg-0" id="navbarSupportedContent">
        <ul class="nav navbar-nav navbar-center ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#" v-bind:style="{ color: ros_conn_color }">ROS: {{ros_conn}}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" v-bind:style="{ color: self_id_color }">GCS_ID: {{self_id}}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" v-bind:style="{ color: total_remote_color }">NODES:
              {{available_nodes}}/{{remote_nodes}}</a>
          </li>

          <!--As we don't use vicon basically, disable this-->
          <!-- <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              DISPLAY:{{display_mode}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#" v-on:click="set_display_mode_global">GLOBAL</a>
              <a class="dropdown-item" href="#" v-on:click="set_display_mode_local">LOCAL</a>
            </div>
          </li> -->

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              LOOP:{{loop_mode}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#" v-on:click="set_loop_mode_on">LOOP ON</a>
              <a class="dropdown-item" href="#" v-on:click="set_loop_mode_off">LOOP OFF</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <img src="material-design-icons/maps/drawable-xxxhdpi/ic_flight_white_48dp.png"
                style="height: 1.4em; width: 1.4em;" />
              SEL:{{selected_uav}}
            </a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              PRI:{{primary_id}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#" v-for="(_, _id) in uavs" v-on:click="set_primary_id(_id)">{{_id}}</a>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              SERVER:{{server_ip}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <!-- <a class="dropdown-item" href="#" v-on:click="set_server_ip('127.0.0.1')">LOCALHOST</a> -->
              <a class="dropdown-item" href="#" v-for="(_ip, _i) in server_ip_list"
                v-on:click="set_server_ip(_ip)">{{_ip}}</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link disabled lps_time" href="#" tabindex="-1" aria-disabled="true"
              v-bind:style="{ color: lps_time_color }">LPS_TIME {{lps_time}}</a>
          </li>
        </ul>
        <!-- <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form> -->
      </div>
    </nav>

    <div class="row" style="height: 90%"></div>
    <transition name="slide-fade">
      <div v-if="! is_wrap_swarm" class="container-fluid col-2 container-fluid" id="swarm-sidebar">
        <h2 id="SWARM" v-on:click="select_all">SWARM</h2>
        <img src="material-design-icons/navigation/drawable-hdpi/ic_expand_less_white_48dp.png" class="middle_icon"
          style="position: absolute; right:1em; top:1em;" v-on:click="wrap_swarm()" />
        <hr />
        <div class="uav-list">
          <uav-component class="uav_comp" v-for="(_status, status) in uavs" v-bind:_id="_status._id"
            v-bind:status="_status"></uav-component>
        </div>
      </div>
      <div v-else class="container-fluid col-2 container-fluid" id="swarm-sidebar-wrap">
        <h2 id="SWARM" v-on:click="select_all">SWARM</h2>
        <img src="material-design-icons/navigation/drawable-hdpi/ic_expand_more_white_48dp.png" class="middle_icon"
          style="position: absolute; right:1em; top:1em;" v-on:click="unwrap_swarm()" />
        <hr />
      </div>
    </transition>

    <div style="position: fixed; left:1em; bottom:1em" id="stats"></div>
    <div id="cmdAera">
      <div>
        <button type="button" v-on:click="command('takeoff')" class="btn btn-lg btn-primary" id="takeoff">
          <img src="material-design-icons/action/drawable-xxxhdpi/ic_flight_takeoff_white_48dp.png"
            class="small_icon" />
          Takeoff
        </button>
        <button type="button" v-on:click="command('landing')" class="btn btn-primary btn-lg" id="landing">
          <img src="material-design-icons/action/drawable-xxxhdpi/ic_flight_land_white_48dp.png" class="small_icon" />
          Landing</button>
        <button type="button" v-on:click="command('emergency')" class="btn btn-danger btn-lg" id="emlanding">
          <img src="material-design-icons/alert/drawable-xxxhdpi/ic_warning_white_48dp.png" class="small_icon" />
          Emergency
        </button>
        <!-- <button type="button" v-on:click="command('flyto')" class="btn btn-primary btn-lg"
            id="flyto">
            <img src="material-design-icons/content/drawable-xxxhdpi/ic_forward_white_48dp.png" class="small_icon" />
            Direct Flyto</button> -->
        <button type="button" v-on:click="command('flyto_traj')" class="btn btn-primary btn-lg" id="flyto">

          <img src="material-design-icons/content/drawable-xxxhdpi/ic_forward_white_48dp.png" class="small_icon" />
          Flyto</button>
        <button type="button" v-on:click="command('circle')" class="btn btn-primary btn-lg">
          <img src="material-design-icons/av/drawable-xxxhdpi/ic_loop_white_48dp.png" class="small_icon" />
          Circle</button>

        <button type="button" v-on:click="trigger_flyto()" v-bind:class="[flyto_class]">
          <img src="material-design-icons/content/drawable-xxxhdpi/ic_forward_white_48dp.png" class="small_icon" />
          FLYTO</button>

        <button type="button" v-on:click="command('traj0')" class="btn btn-primary btn-lg">
          <img src="material-design-icons/action/drawable-xxxhdpi/ic_hourglass_empty_white_48dp.png"
            class="small_icon" />
          Traj</button>

        <button type="button" v-on:click="command('traj1')" class="btn btn-primary btn-lg">
          <img src="material-design-icons/action/drawable-xxxhdpi/ic_hourglass_empty_white_48dp.png"
            class="small_icon" />
          Traj Yaw</button>

        <button type="button" v-on:click="command('mission0')" class="btn btn-primary btn-lg">
          <img src="material-design-icons/action/drawable-xxxhdpi/ic_hourglass_empty_white_48dp.png"
            class="small_icon" />
          MISSION 0</button>

        <!-- <button type="button" v-on:click="range_select" class="btn btn-primary btn-lg"
            id="range_select">
             <img src="material-design-icons/content/drawable-xxxhdpi/ic_select_all_white_48dp.png" class="small_icon" />
            Select</button> -->
        <button type="button" v-on:click="command('expo')" class="btn btn-primary btn-lg">
          <img src="material-design-icons/av/drawable-xxxhdpi/ic_repeat_white_48dp.png" class="small_icon" />
          Exp!</button>


        <hr />
        <h4>FORMATIONs</h4>
        <button type="button" v-on:click="formation_hold(0)" class="btn btn-primary btn-lg">
          <img src="material-design-icons/navigation/drawable-xxxhdpi/ic_apps_white_48dp.png" class="small_icon" />
          Hold</button>
        <button type="button" v-on:click="formation_hold(1)" class="btn btn-primary btn-lg">
          <img src="material-design-icons/navigation/drawable-xxxhdpi/ic_apps_white_48dp.png" class="small_icon" />
          Lock</button>
        <button type="button" class="btn btn-secondary btn-danger" v-on:click="stop_formation()">
          <img src="material-design-icons/navigation/drawable-xxxhdpi/ic_cancel_white_48dp.png" class="small_icon" />
          STOP</button>
        <br />

        <button type="button" v-on:click="formation(0)" v-bind:class="[formation_class[0]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          0</button>
        <button type="button" v-on:click="formation(1)" v-bind:class="[formation_class[1]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          1</button>
        <button type="button" v-on:click="formation(2)" v-bind:class="[formation_class[2]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          2</button>
        <button type="button" v-on:click="formation(3)" v-bind:class="[formation_class[3]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          3</button>
        <button type="button" v-on:click="formation(4)" v-bind:class="[formation_class[4]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          4</button>
        <button type="button" v-on:click="formation(100)" v-bind:class="[formation_class[100]]">
          <img src="material-design-icons/image/drawable-xxxhdpi/ic_transform_white_48dp.png" class="small_icon" />
          R</button>

      </div>
      <!-- <button type="button" class="btn btn-secondary btn-lg" >Mission C</button> -->
      <!-- <button type="button" class="btn btn-secondary btn-lg" >Mission D</button> -->
    </div>
    <div class="drone_id" v-for="(_, _id) in uav_screen_pos"
      v-bind:style="{ top: uav_screen_pos[_id].y, left: uav_screen_pos[_id].x, position: 'fixed', color:uav_label_colors[_id]}">
      {{_id}}</div>

      <joy-component  v-bind:rc="rc"></uav-component>
  </div>



  <script type="module">
    import { SimSingleCommander } from './src/simulator_commander.mjs';
    import { SwarmGCSUI } from "./src/gcs_view.mjs";
    var ui = new SwarmGCSUI({}, {
      chessboard: true,
      grid: true,
      camera_mode: "track",
      camera_relative_pos : {x: -3, y:0, z:3} 
    });
    ui.select_id = 0;
    var sc = new SimSingleCommander(ui);
    window.ui = ui;
  </script>
</body>

</html>